<script setup lang="ts">
    import { onMounted, onDeactivated , ref, watch, onActivated } from 'vue';
    import { get } from '../HTTP/api';
    import { RouterLink } from 'vue-router';

    import useDataStore from '@/stores/data';
    let dataStore = useDataStore()


    let today = ref('')
    today.value = dataStore.date =='' ?  getDate() : dataStore.date;

    let month = ref('')
    let day = ref('')

// 在加载的时候就直接调用该方法
    onMounted(()=>{
      // 当store中没有存放数据时，查询的就是当天的今史，如果存放了数据，则会用store中的日期
       getList( dataStore.date == '' ?  today.value : dataStore.date )
    })


    // 用来发起请求获取的数据，要用ref进行包裹，不然数据传递进来没办法进行更新和现实
    let list:any = ref([]) 

    // watch(list , (value)=>{
    //     console.log(value);
        
    // })
   
    const key = '267083ded3dada11b4f131823b2efe94'

    function getDate(){
      const date = new Date()
      // 返回 月/日 这样的格式
      return  (date.getMonth() + 1)  + '/' + date.getDate()
    }



    function changeDate(){
       today.value =  month.value + '/' + day.value
      //  获取输入的月、日然后获取今史查询数据
       getList(today.value)

      // 把改变后的日期存放到store中
       dataStore.date = today.value

       month.value = ''
       day.value = ''
    }

    // 获取数据
    function getList(today:string){
      console.log("获取列表触发了");
      
        get(` http://localhost:5173/api/todayOnhistory/queryEvent.php?key=${key}&date=${today}`).then(
          (data:any) =>{
            if(data.error_code === 0){ 
                list.value = data.result                
                console.log(list);
            }
          }
        )
    }     
    

</script>

<template>
  <div>

  

   <header>
      <h3>历史上的今天：{{ today }}</h3>
   </header>

         <!--列表-->  
    <ul class="list"  >
        <li v-for="(item,index) in list " :key = 'index'> 
          <!-- <RouterLink :to="{path:'/detail'}"> {{ index+1 }}、{{ item.title }} {{ item.date }}</RouterLink> 
            -->
          <RouterLink :to="{
            path:'/detail', 
            query:{
              e_id: item.e_id
            }
          }" 
          
          > 
          {{ index+1 }}、{{ item.title }} {{ item.date }} 
        </RouterLink>
        </li>
    </ul>

   <!--尾部-->
    <footer>
        <div>
          <input v-model="month" type="number" placeholder="月" class="date" id="month">
        </div>
        <div>
          <input v-model="day" type="number" placeholder="日" class="date" id="day">
        </div>
        <div>
          <button type="button" class="submit" @click="changeDate">查看</button>
        </div>
    </footer>

  </div>
</template>


<style scoped>

header {
background-color: #eee;
position: fixed;
top: 0;
width: 100%;
}
header h3 {
margin: 0;
padding: 0;
text-align: center;
color: #666;
font-weight: normal;
height: 40px;
line-height: 40px;
}


footer {
background-color: #eee;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
height: 35px;
line-height: 35px;
color: #666;
padding: 5px 0;
}
footer div {
flex: 1;
padding-left: 5px;
}
footer input.date {
border: 0;
background-color: #fff;
color: #666;
padding: 5px;
-moz-appearance: textfield;
width: 90%;
height: 25px;
}
footer button.submit {
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
background-color: #fff;
width: 80%;
height: 100%;
color: #666;
}



.list {
list-style-type: none;
margin: 40px 0;
padding : 0;

}
.list li {
border-bottom: 1px solid #eee;
font-size: 14px;
}
.list li a {
text-decoration: none;
color: #666;
display: block;
padding: 10px;
}
.list li a:hover {
background-color: #333333;
color: white;
}
.list li a em {
float: right;
font-style: normal;
padding-right: 5px;
}

</style>
